<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
		<style type="text/css">
			
			.box {
				margin: 200px auto;
				width: 200px;
				height: 100px;
				background-color: #0086B3;
				/* transition: all .5s; */
			}
			.inner {
				width: 300px;
				height: 100px;
				background-color: #CCCCCC;
				transition: all .5s;     /*过渡*/
			}
			.box:hover .inner{
				height:100%;
			}
			a {
				text-decoration: none;
				color: red;
			}
			a:visited {
				color: #FF6700;
			}
			a:hover {
				color: yellow;
			}
			.wrap {
				margin: 0 auto;
				width: 800px;
				height: 300px;
				border: 1px solid #333;
				overflow: hidden;
			}
			.myform {
				margin: 50px;
			}
			[type ='text'] {
				box-sizing: content-box; /*转换盒模型*/
				width: 240px;
				height: 50px;
				border: 1px solid #ddd;
			}
			[type ='text']:hover,[type="submit"]:hover {
				border: 1px solid #bbb;
			}
			[type="submit"] {
				margin-top: 1px;
				box-sizing: content-box;
				width: 50px;
				height: 50px;
				background-color: transparent;
				border: 1px solid #ddd;
				border-left:none;
				
			}
			
			/*使用伪类选择器：focus来选择input获取焦点的样式*/
			[type ='text']:focus {
				border: 1px solid #FF6700;
				outline: none;
			}
			</style>
			
	</head>
	<body>
		<!-- 伪类选择器
		  class 类 选择器 .
		 他是能被浏览器识别的，用来定义元素特殊状态，某种特性下的样式
		 链接的伪类：
			 :link  a标签没有被点击过的样子
			 :visited a标签点击过的样式  其实就是访问过的状态
			 :hover  a标签鼠标悬浮上面的一个样式
			 :active a标签被点击了，然后鼠标没抬起来时候的一个样式
		     lv ha 
		结构的伪类:
			:first-child 表示第一个子元素  我们不是给父元素加，要给子元素加
			:last-child 表示最后一个子元素 
			:nth-child(n) 可以选择任意一个子元素 数值/ odd 奇数  even 偶数  / 公式 
		input 的伪类 ：
			:focus
		
		 -->
		<!-- <div class="box">
			购物车
			<div class="inner"></div>
		</div> -->
		<div class="wrap">
			<form class="myform" action="">
				<input class="iconfont" type="text" name="user"><input class="iconfont" type="submit" value="&#xe627;">
			</form>
		</div>
	</body>
</html>
